<template>
  <div>
    vue-lottie
    <div class="lottie" ref="lottie">1</div>
  </div>
</template>

<script>
import lottie from 'lottie-web'
import shuzi_lottie_data from './shuzi_lottie_data.json'
export default {
  name: "vue-lottie",
  data() {
    return {
      animation: null
    }
  },
  mounted() {
    this.animation = lottie.loadAnimation({
      container: this.$refs.lottie, // 绑定dom节点
      renderer: 'svg', // 渲染方式:svg、canvas
      loop: false, // 是否循环播放，默认：false
      autoplay: false, // 是否自动播放, 默认true
      animationData: shuzi_lottie_data // AE动画使用bodymovie导出为json数据
    })
    this.animation.setSpeed(0.2);
    // this.animation.goToAndStop(60, true)
    // this.animation.play()
    // this.animation.goToAndStop(20, true)
    // this.animation.playSegments([10,20], false);
    this.animation.playSegments([[0,20]], true);
    setTimeout(()=>{
      this.animation.playSegments([[20,100]], true);
    },5000)
  }
}
</script>

<style scoped>
.lottie {
  width: 200px;
  height: 200px;
  background-color: aqua;
}
</style>
